box model 的四個區域

content內容區域。
border邊框區域。
padding內容邊框之間的距離，稱內距。
margin 邊框之外的距離通常用來做元素與元素之間的推移。

box-sizing屬性：

• conten-box這是預設屬性，設定寬高時，指的是content的區域。
• border-box:設定寬高時，從border區域開始計算。

常用寬高屬性:

• width-height:設定寬高
• min-width:限定最小寬度
• min-height:限定最小高度
• max-width:限定最大寬度
• max-height:限定最大高度

設定寬高常用單位:

• px:固定像素
• %:設定相對於父元素，所佔的比例，例如50%
• vw:viewport width 視阜的寬度比例，例如50vw就是viewport寬度的一半。
• vh:viewport height 視阜的高度比例，例如50vh就是viewport高度的一半。

總結:

• 任何一個元素在頁面上顯示，都有四個區域，由內而外，分別是content/padding/border/margin。
• box-sizing的預設值是content，當設定寬高時，指的是content區域的寬高，如果希望可以 從border計算，就設定成border-box。
• 如果希望所有元素可以從border開始計算，就要設定:

* {
    box-sizing:border-box;
}